<template>
    <div>
        <dv-border-box-13 style="width: 30vw;height: 25vh;">
            <div class="content">
                <div class="title">
                    <dv-decoration-3 class="decoration1"/>
                    <h6 style="margin: 0;color: white">智慧大棚土壤质量实时监测</h6>
                    <dv-decoration-3 class="decoration1"/>
                </div>
                <div class="greenhouse-info">
                    <dv-border-box-8 class="greenhouse-info-item">
                        <div class="info-text">
                            <h5 style="margin: 0;color: white">智慧大棚编号</h5>
                            <p class="result">{{greenhouse.name}}</p>
                        </div>
                    </dv-border-box-8>
                    <dv-border-box-8 class="greenhouse-info-item">
                        <div class="info-text">
                            <h5 style="margin: 0;color: white">占地面积</h5>
                            <p class="result">{{greenhouse.area}}</p>
                        </div>
                    </dv-border-box-8>
                    <dv-border-box-8 class="greenhouse-info-item">
                        <div class="info-text">
                            <h5 style="margin: 0;color: white">生长阶段</h5>
                            <p class="result">开花结果期</p>
                        </div>
                    </dv-border-box-8>
                    <dv-border-box-8 class="greenhouse-info-item">
                        <div class="info-text">
                            <h5 style="margin: 0;color: white">土壤PH值</h5>
                            <p class="result">{{PH}}</p>
                        </div>
                    </dv-border-box-8>
                </div>
                <div class="soil-info-container">
                    <dv-border-box-1 class="boder-size">
                        <div class="soil-info-content">
                            <SoilInfoItem :device_id="5"></SoilInfoItem>
                        </div>
                    </dv-border-box-1>
                    <dv-border-box-1 class="boder-size">
                        <div class="soil-info-content">
                            <SoilInfoItem :device_id="6"></SoilInfoItem>
                        </div>
                    </dv-border-box-1>
                    <dv-border-box-1 class="boder-size">
                        <div class="soil-info-content">
                            <soilInfoItem :device_id="7"></SoilInfoItem>
                        </div>
                    </dv-border-box-1>
                </div>
            </div>
        </dv-border-box-13>
    </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import axios from "@/Api/axiosInterceptor.ts";
import SoilInfoItem from "@/components/SoilInfo/SoilInfoItem.vue";
import {headerConfig} from "@/Api/HeaderConfig.ts";
import {UPDATE_TIME} from "@/utils/UpdateTime.ts";
let greenhouse_id = ref<number>(1);
let PH = ref<number>(0);
interface GreenHouse{
    name: string,
    address: string,
    area: number,
}
let greenhouse = reactive<GreenHouse>({
    name: "",
    address: "",
    area: 0,
})
onMounted(()=>{
    fetchData();
    setInterval(fetchData, UPDATE_TIME);
})

function fetchData(){
    axios.get(`http://localhost:8080/api/greenhouses/get/?id=${greenhouse_id.value}`, headerConfig).then((response) => {
        Object.assign(greenhouse, response.data);
    }).catch((error) => {
        console.log(error);
    });
    axios.get(`http://localhost:8080/api/sensor-datas/device/4`, headerConfig).then((response) => {
        PH.value = response.data.value;
    })
}



</script>

<style scoped>
.content{
    padding-top: 2vh;
}
.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.decoration1 {
    width: 8vw;
    height: 2vh;
}
.greenhouse-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.greenhouse-info-item {
    width: 7vw;
    height: 8vh;
}

.info-text {
    height: 70%;
    padding-top: 1vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.result {
    margin: 0;
    font-size: 0.8vw;
    color: white;
}

.soil-info-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.boder-size {
    width: 9.5vw;
    height: 12vh;
}

.soil-info-content {
    padding-top: 3vh;
}


</style>